<template>
  <div id="orderDetail">
    <Header :showBack="true"></Header>
    <div class="rootMain">
      <h4>{{$t('m.formula')}}</h4>
      <div>
        <div>
          <span>{{$t('m.distributionRatio')}}</span>
          <span>{{$t('m.naturalMonth')}}</span>
        </div>
        <b>X</b>
        <div>{{$t('m.userCurrency')}}</div>
        <b>=</b>
        <div>{{$t('m.dailyIncome')}}</div>
      </div>
      <h4>{{$t('m.ruleDescription')}}</h4>
      <div>
        <p>{{$t('m.rulerTips')}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import Header from "@/components/header";
import { mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      data: {}
    };
  },
  created() {
    this.changeTitle(this.$t("m.ruleDescription"));
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
  },
  components: {
    Header
  },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle"])
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#orderDetail {
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    padding: 0.5rem 0.3rem;
    h4 {
      font-weight: bold;
      font-size: 0.26rem;
    }
    > div {
      padding: 0.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 0.2rem;
        span {
          height: 0.75rem;
          display: flex;
          align-items: center;
          &:first-child {
            border-bottom: 1px solid #333;
          }
        }
      }
      p {
        margin: 0.2rem 0;
      }
    }
  }
}
</style>